<template>
    <div class="container">
      <div class="table-wrapper">
        <table>
          <thead>
            <tr>
              <th>组号</th>
              <th>学号</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(data, index) in groupedData" :key="index">
              <tr v-if="isGroupStart(index)">
                <td :rowspan="groupRowCount(data.groupName)">{{ data.groupName }}</td>
                <td>
                  <input type="text" v-model="data.memberId" :disabled="!editable">
                </td>
              </tr>
              <tr v-else>
                <td>
                  <input type="text" v-model="data.memberId" :disabled="!editable">
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
      <button @click="toggleEdit">{{ editable ? '保存修改' : '编辑学号' }}</button>
      <button v-if="editable" @click="sendGroupedData">上传修改</button>
    </div>
  </template>
  
  <script>
  import { ref, onMounted } from 'vue';
  import axios from 'axios';
  
  export default {
    setup() {
      const groupedData = ref([]);
  
      // 模拟从后台获取的数据
      const fetchData = async () => {
        try {
          const response = await axios.get('http://localhost:8080/group/getAll');
          const rawData = response.data;
  
          // 将数据转换为对象数组形式
          const data = rawData.map((item) => ({
            groupName: item.groupId,
            memberId: item.memberId,
          }));
  
          groupedData.value = data;
        } catch (error) {
          console.error('获取数据失败:', error);
        }
      };
  
      const editable = ref(false);
  
      const toggleEdit = () => {
        editable.value = !editable.value;
      };
  
      const sendGroupedData = async () => {
        try {
          const payload = groupedData.value.map(item => ({
            groupId: item.groupName,
            memberId: item.memberId,
          }));
  
          const response = await axios.post('http://localhost:8080/group/setAll', payload, {
            headers: {
              'Content-Type': 'application/json'
            }
          });
          console.log('数据发送成功:', response.data);
          editable.value = false;
  
          // 上传成功后给出提醒
          alert('修改成功！');
        } catch (error) {
          console.error('发送数据失败:', error);
        }
      };
  
      const isGroupStart = (index) => {
        if (index === 0) {
          return true;
        }
        return groupedData.value[index].groupName !== groupedData.value[index - 1].groupName;
      };
  
      const groupRowCount = (groupName) => {
        return groupedData.value.filter(data => data.groupName === groupName).length;
      };
  
      onMounted(() => {
        fetchData();
      });
  
      return {
        groupedData,
        editable,
        toggleEdit,
        sendGroupedData,
        isGroupStart,
        groupRowCount
      };
    },
  };
  </script>
  
  <style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    padding-top: 20px;
  }
  
  .table-wrapper {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow-x: auto;
  }
  
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
  }
  
  button {
    margin-top: 10px;
    padding: 8px 16px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
  }
  
  button:hover {
    background-color: #0056b3;
  }
  </style>
  